<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<tr><th><input type="checkbox" name="cb_select_all" /></th><th>Header</th></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
			<tr><td><input type="checkbox" name="cb_select" /></td><td>Data</td></tr>
		</table>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("input[name='cb_select_all']").change(function() {
				//checkbox点击切换的两种状态区分
				// console.log(this.checked);//dom属性
				// console.log($(this).prop("checked"));//jq属性，可以赋值也可获取值
				// console.log($(this).attr("checked"));//jq属性 赋值操作比较多
				let _self = $(this);
				$("input[name='cb_select']").each(function(index, item) {
					// console.log(item);//item是dom元素
					// item.prop("checked", "true");
					// item.checked = true;//dom元素
					//标准版本，能实现功能
					// if(_self.prop("checked")) {
					// 	//将所有name为cb_select的checkbox设置为选中
					// 	$(item).prop("checked", true);//jq实现
					// }else {
					// 	//将所有name为cb_select的checkbox设置为不选中
					// 	$(item).prop("checked", false);//不需要将值使用""包裹，因为要使用boolean值
					// }
					//简化版本
					$(item).prop("checked", _self.prop("checked"));
				});
			});
		</script>
	</body>
</html>
